<template>
  <div>
    <el-dialog
      v-model="visible"
      :title="formData.form.title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="closeDialog"
      width="618"
    >
      <el-form :model="formData.form" style="border-top: 1px solid #d0d3d9">
        <el-form-item
          required
          label="分类名称"
          label-width="85px"
          prop="name"
          :rules="[{ required: true, message: '分类名称不能为空！' }]"
          style="width: 320px; padding-top: 30px; margin-left: 52px"
        >
          <el-input v-model="formData.form.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            @click="closeDialog"
            class="btnhover"
            style="
              width: 80px;
              height: 30px;
              background-color: rgba(255, 255, 255, 1);
              border: 1px solid rgba(187, 187, 187, 1);
              color: rgba(142, 142, 142, 1);
            "
            >取消</el-button
          >
          <el-button
            @click="besurebtn"
            class="btnhover"
            style="
              width: 80px;
              height: 30px;
              background-color: #ff9900;
              border: 1px solid #ff9900;
              color: rgba(255, 255, 255, 1);
            "
          >
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import * as getlearnApi from '@/api/spb/partyMemberLearning/index'
import globalApi from '@/api/spb/global'
const message = useMessage()
let treeData = ref([])
const editId = ref()
const formData = reactive({
  form: {
    name: '',
    title: '',
    id: '',
    treeData: []
  }
})
const props = defineProps({
  visible: Boolean,
  editData: {
    type: Object
  }
})
const editVal = ref()
const emit = defineEmits(['update:visible', 'getedit'])
const visible = computed({
  get: () => {
    return props.visible
  },
  set: (val) => {
    emit('update:visible', val)
  }
})
watch(
  () => props.editData,
  (val) => {
    if (val) {
      formData.form.title = val.dialogtitle || ''
      formData.form.name = val.name || ''
      formData.form.treeData = val.treeData || []
      editVal.value = val.editVal
    }
  },
  { immediate: true }
)

/** 取消 */
const closeDialog = () => {
  visible.value = false
  emit('getedit', props.editData.pageNo)
}
/** 确定 */
const besurebtn = () => {
  const operateType = formData.form.title.includes('新增分类') ? 'create' : 'update'
  if (operateType == 'create') {
    var data = {
      label: formData.form.name,
      value: String(
        Number(formData.form.treeData[0] ? formData.form.treeData[0].value : 0) + 1
      ),
      dictType: 'countryside_app_article_type',
      status: 0,
      sort: Number(formData.form.treeData[0] ? formData.form.treeData[0].value : 0) + 1
    }
  } else {
    data = {
      id: editVal.value.id,
      label: formData.form.name,
      value: editVal.value.value,
      dictType: 'countryside_app_article_type',
      status: 0,
      sort: editVal.value.sort
    }
  }
  globalApi.operateDictData(operateType, data).then(() => {
    message.success('分类操作成功')
    emit('getedit', props.editData.pageNo)
    visible.value = false
  })
}

onMounted(() => {})
</script>
<style scoped>
::v-deep .el-dialog__body {
  padding: 10px 0 !important;
}

.btnhover:hover {
  opacity: 0.8;
}
</style>
